feat: default pepper baseline + rename all.css to styles.css#3
Merged
Conversation
Previously, consumers had to wrap their app with <FlavorProvider> AND
import the CSS for any component to render styled. Forgetting either
produced silently unstyled output — a sharp edge inconsistent with most
component libraries (MUI/Chakra render with a default theme, no Provider
required). The published package now leads with "import CSS and you are
done", and <FlavorProvider> is reserved for explicit flavor switching or
nested-region theming.
- scripts/build-flavor-css.mjs: for pepper, additionally emit an
unprefixed pass and prepend it to the top of dist/css/all.css.
Specificity of `[data-flavor="xxx"] .foo` (0,0,3,0) beats `.foo`
(0,0,2,0), so any FlavorProvider still overrides the baseline. The
per-flavor dist/css/{flavor}.css files are intentionally unchanged —
that optimization path still requires matching FlavorProvider flavor
because the single-flavor file has no other context.
- README.md: reframe the usage section so the minimal "just import CSS"
example comes first, and FlavorProvider is shown only in the
override/nesting example. Document the existing source-order caveat
for nested providers (outer lolipop + inner pepper will resolve to
lolipop because CSS descendant selectors match any ancestor and
the later flavor wins on tie).
- FlavorProvider JSDoc: note that pepper now applies by default via CSS
baseline, so the Provider is only needed for explicit flavor choices.
Size: all.css 2.93 MB -> 3.29 MB (~+19 KB gzip) due to the added
unscoped pepper pass.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Signal "this is the default stylesheet you should import" via naming +
path placement. `all.css` reads like "one of seven", while the new path
`wip-ui/styles.css` matches the convention consumers already know from
Mantine (`@mantine/core/styles.css`) and Radix Themes
(`@radix-ui/themes/styles.css`).
- scripts/build-flavor-css.mjs: emit dist/styles.css (package root)
instead of dist/css/all.css. Per-flavor dist/css/{flavor}.css files
are unchanged. Also clean DIST_DIR and stale dist/styles.css before
writing, so renames/removals don't leave orphaned files in dist/.
- package.json: expose "./styles.css" subpath export. Per-flavor
"./css/*.css" pattern retained for the bundle-size-optimization path.
- README.md + FlavorProvider JSDoc: reference wip-ui/styles.css.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
概要
このPRは次の2つの変更を含みます。
<FlavorProvider>なしでもコンポーネントが描画されるよう、pepper を baseline として CSS に含めるall.cssをstyles.cssにリネームし、パッケージルート直下に配置変更1: pepper baseline
FlavorProvider+ CSS import の 両方が必須。どちらか抜けると無言で unstyledFlavorProviderはフレーバー切り替え・領域別ネスト用途に限定変更2:
all.css→styles.csswip-ui/css/all.cssという名前は「7つのうちの1つ」感が強く、「これを入れるのが当然」というシグナルが弱かった。Mantine (@mantine/core/styles.css) や Radix Themes (@radix-ui/themes/styles.css) と同じ慣例に合わせて、デフォルトの stylesheet としてwip-ui/styles.cssに改名。import 'wip-ui/css/all.css'import 'wip-ui/styles.css'per-flavor の
wip-ui/css/{flavor}.cssはバンドルサイズ最適化用途として変更なし。詳細
baseline 側
scripts/build-flavor-css.mjs: pepper のビルド時に prefix なしのパスも追加で生成し、combined CSS の先頭に prepend.wip-button.-color-interactive(0,0,2,0)< scoped[data-flavor="xxx"] .wip-button.-color-interactive(0,0,3,0)→ Provider は常に baseline に勝つsrc/FlavorProvider/FlavorProvider.tsx: JSDoc に baseline で pepper が自動適用される旨を追記rename 側
scripts/build-flavor-css.mjs: 出力先をdist/css/all.css→dist/styles.css(パッケージルート直下)。ビルド前にDIST_DIRとdist/styles.cssを掃除して、リネーム/削除時に古いファイルが残らないようにpackage.json:"./styles.css": "./dist/styles.css"を exports に追加。per-flavor の"./css/*.css"pattern は維持README.md+ FlavorProvider JSDoc:wip-ui/styles.cssを参照既知の制約(本 PR 由来ではない)
入れ子 Provider で内側フレーバーがソース順序上で外側より前にあると、外側が勝ちます。例:
```tsx
{/* pepper を期待しているが lolipop で描画される */}
```
CSS の子孫セレクタは「最も近い祖先」の概念を持たず、詳細度が同点の場合はソース順序で後に書かれたルールが勝つため。本 PR で新たに生じた挙動ではなく、flavor 入れ子の実使用頻度がほぼゼロのため別 issue 扱い、今回は対応しません。
テスト